<template>
  <div class="register-container">
    <n-card class="register-card" title="用户注册">
      <n-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-placement="left"
        label-width="auto"
        require-mark-placement="right-hanging"
        size="large"
      >
        <n-form-item label="用户名" path="username">
          <n-input
            :value="formData.username"
            placeholder="请输入用户名"
            clearable
            @update:value="formData.username = $event"
          >
            <template #prefix>
              <n-icon><i class="fas fa-user"></i></n-icon>
            </template>
          </n-input>
        </n-form-item>

        <n-form-item label="昵称" path="nickname">
          <n-input
            :value="formData.nickname"
            placeholder="请输入昵称"
            clearable
            @update:value="formData.nickname = $event"
          >
            <template #prefix>
              <n-icon><i class="fas fa-user-circle"></i></n-icon>
            </template>
          </n-input>
        </n-form-item>

        <n-form-item label="邮箱" path="email">
          <n-input
            :value="formData.email"
            placeholder="请输入邮箱"
            clearable
            @update:value="formData.email = $event"
          >
            <template #prefix>
              <n-icon><i class="fas fa-envelope"></i></n-icon>
            </template>
          </n-input>
        </n-form-item>

        <n-form-item label="密码" path="password">
          <n-input
            :value="formData.password"
            type="password"
            placeholder="请输入密码"
            clearable
            show-password-on="click"
            @update:value="formData.password = $event"
          >
            <template #prefix>
              <n-icon><i class="fas fa-lock"></i></n-icon>
            </template>
          </n-input>
        </n-form-item>

        <n-form-item label="确认密码" path="rePassword">
          <n-input
            :value="formData.rePassword"
            type="password"
            placeholder="请再次输入密码"
            clearable
            show-password-on="click"
            @update:value="formData.rePassword = $event"
          >
            <template #prefix>
              <n-icon><i class="fas fa-lock"></i></n-icon>
            </template>
          </n-input>
        </n-form-item>

        <n-form-item label="性别" path="gender">
          <n-radio-group :value="formData.gender" @update:value="formData.gender = $event">
            <n-space>
              <n-radio :value="0">男</n-radio>
              <n-radio :value="1">女</n-radio>
              <n-radio :value="2">其他</n-radio>
            </n-space>
          </n-radio-group>
        </n-form-item>

        <n-form-item>
          <n-space vertical>
            <n-button
              type="primary"
              size="large"
              block
              :loading="loading"
              @click="handleRegister"
            >
              注册
            </n-button>
            <n-button
              size="large"
              block
              @click="goToLogin"
            >
              已有账号？立即登录
            </n-button>
          </n-space>
        </n-form-item>
      </n-form>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import type { FormInst } from 'naive-ui'
import { userApi } from '@/api/user'
import type { UserDto } from '@/types/user'

const router = useRouter()
const message = useMessage()

// 表单引用
const formRef = ref<FormInst | null>(null)

// 表单数据
const formData = reactive<UserDto>({
  username: '',
  password: '',
  nickname: '',
  email: '',
  gender: 2,
  rePassword: ''
})



// 加载状态
const loading = ref(false)

// 表单验证规则
const rules = {
  username: {
    required: true,
    message: '请输入用户名',
    trigger: 'blur'
  },
  nickname: {
    required: true,
    message: '请输入昵称',
    trigger: 'blur'
  },
  email: {
    required: true,
    message: '请输入邮箱',
    trigger: 'blur',
    pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
    validator: (rule: any, value: string) => {
      if (!value) {
        return new Error('请输入邮箱')
      }
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        return new Error('请输入正确的邮箱格式')
      }
    }
  },
  password: {
    required: true,
    message: '请输入密码',
    trigger: 'blur',
    validator: (rule: any, value: string) => {
      if (!value) {
        return new Error('请输入密码')
      }
      if (value.length < 6) {
        return new Error('密码长度不能少于6位')
      }
    }
  },
  rePassword: {
    required: true,
    message: '请确认密码',
    trigger: 'blur',
    validator: (rule: any, value: string) => {
      if (!value) {
        return new Error('请确认密码')
      }
      if (value !== formData.password) {
        return new Error('两次输入的密码不一致')
      }
    }
  }
}

// 注册处理
const handleRegister = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    loading.value = true

    await userApi.register(formData)
    message.success('注册成功，请登录')
    
    // 跳转到登录页
    router.push('/login')
  } catch (error: any) {
    message.error(error.message || '注册失败')
  } finally {
    loading.value = false
  }
}

// 跳转到登录页
const goToLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.register-card {
  width: 100%;
  max-width: 500px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 480px) {
  .register-container {
    padding: 16px;
  }
  
  .register-card {
    max-width: 100%;
  }
}
</style> 